<template>
  <div>
    <el-card>
      <div>
        <!--主页视图区域-->
        <!--图片区域-->
        <div>
          <div class="condition">
            <div class="text1">填写条件</div>
          </div>
        </div>
        <div class="bg-card">
          <el-form :inline="true">
            <el-form-item label="盘点年份">
              <el-date-picker
                style="width:180px;"
                v-model="year"
                type="year"
                value-format="yyyy"
                format="yyyy"
                placeholder="选择年"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="盘点月份">
              <el-date-picker
                style="width:180px;"
                v-model="month"
                type="month"
                placeholder="选择月"
                format="MM"
                value-format="MM"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="盘点申请时间">
              <el-date-picker
                v-model="checkFillTime"
                type="date"
                format="yyyyMMdd"
                value-format="yyyyMMdd"
                :picker-options="pickerOptions"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item prop="scarpType" label="盘点单状态">
              <el-select v-model="type" :value="1">
                <el-option
                  v-for="item in typeOpt"
                  :key="item.index"
                  :label="item.value"
                  :value="item.index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="margin-top:27.994px"
                @click="fetch"
                >查询</el-button
              >
              <el-button
                type="success"
                style="margin-top:27.994px"
                @click="handleAdd"
                >新增</el-button
              >
              <!-- <el-button style="margin-top:27.994px" @click="handleDownload">入库单模板下载</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <br />
      <el-table :data="newlist" border style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="checkNum"
          label="盘点单号"
          align="center"
          width="230"
        ></el-table-column>
        <el-table-column label="年份" align="center">
          <template slot-scope="{ row }">
            <span>{{
              row.checkFillTime ? row.checkFillTime.substring(0, 4) : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="月份" align="center">
          <template slot-scope="{ row }">
            <span>{{
              row.checkFillTime ? row.checkFillTime.substring(4, 6) : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="warehouse" label="仓库名称" align="center">
          <template slot-scope="{ row }">
            <span>{{ goodsWareHouse[row.warehouse] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkFillTime"
          label="盘点申请时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="checkPeople"
          label="经办人"
          align="center"
        ></el-table-column>
        <el-table-column prop="goodsStatus" label="盘点状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.goodsStatus === 0">待提交</span>
            <span v-else-if="scope.row.goodsStatus === 1">待审核</span>
            <span v-else-if="scope.row.goodsStatus === 2">通过</span>
            <span v-else-if="scope.row.goodsStatus === 3">退回</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="checkSubPeople"
          label="审核人"
          align="center"
        ></el-table-column>
        <el-table-column prop="checkSubReason" label="审核意见" align="center">
          <template slot-scope="scope">
            <span style="color:red">{{ scope.row.checkSubReason }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="nightContent"
          label="操作"
          align="center"
          widthData="300"
          width="300"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              @click="handleEdit(scope.row)"
              size="mini"
              v-if="
                  scope.row.goodsStatus !== 1 &&
                  scope.row.goodsStatus !== 2 &&
                  scope.row.checkPeople === userInfo.userName
              "
              >编辑</el-button
            >
            <el-button
              type="primary"
              @click="handlePrint(scope.row)"
              size="mini"
              >查看</el-button
            >
            <el-button
              type="warning"
              @click="handleView(scope.row, 1)"
              size="mini"
              v-if="
                Number(isShow) === 2 &&
                  scope.row.goodsStatus !== 0
              "
            >
              {{ scope.row.goodsStatus === 1 ? "审核" : "重新审核" }}
            </el-button>
            <el-button
              type="warning"
              @click="handleDownload(scope.row.checkNum)"
              size="mini"
              v-if="scope.row.goodsStatus === 2"
              >下载</el-button
            >
            <el-button
              type="danger"
              v-if="
                  scope.row.goodsStatus !== 1 &&
                  scope.row.goodsStatus !== 2 &&
                  scope.row.checkPeople === userInfo.userName
              "
              @click="handleDel(scope.row)"
              size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="float:right;margin-bottom:10.003px">
        <span class="demonstration"></span>
        <el-pagination
          :current-page.sync="page"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import { table } from "@/mixin/table";
import { MessageBox } from "element-ui";
import FileSaver from "file-saver";
export default {
  mixins: [table],
  data() {
    return {
      query: {
        checkFillTime: "",
        currentPage: 0,
        day: "",
        month: "",
        pageSize: 0,
        warehouse: 1,
        year: ""
      },
      tableData: [],
      isShow: null,
      page: 1,
      userInfo: null,
      year: "",
      month: "",
      checkFillTime: ""
    };
  },
  methods: {
    async fetch() {
      this.query.checkFillTime = this.checkFillTime;
      this.query.year = this.year;
      this.query.month = this.month;
      const res = await this.$http.post(
        "/restful/v1/dd/check/getCheckList",
        this.query
      );
      if (res.data.code === 1 && res.data.object) {
        this.tableData = res.data.object.dataList;
        // this.total = res.data.object.page.totalSize;
        // this.total = res.data.object.dataList.length
      } else {
        this.tableData = [];
        this.total = 0;
      }
    },
    handleAdd() {
      this.$router.push({
        path: "/home/storehouse1/edit3",
        query: {
          type: "add",
          checkNum: ""
        }
      });
    },
    handleEdit(row) {
      console.log(row.checkNum);
      this.$router.push({
        path: "/home/storehouse1/edit3",
        query: {
          type: "edit",
          checkNum: row.checkNum,
          checkFillTime: row.checkFillTime
        }
      });
    },
    handlePrint(row) {
      // console.log(row);
      this.$router.push({
        path: "/home/storehouse1/detail4",
        query: {
          num: row.checkNum,
          warehouse: row.warehouse,
          inboundFillTime: row.checkFillTime
        }
      });
    },
    handleView(row, checkout) {
      console.log(row.checkNum);
      this.$router.push({
        path: "/home/storehouse1/edit3",
        query: {
          type: "view",
          checkNum: row.checkNum,
          checkFillTime: row.checkFillTime,
          checkout
        }
      });
    },
    async handleDel(row) {
      if (row.goodsStatus === 0 || row.goodsStatus === 3) {
        MessageBox.confirm("此操作将删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            const res = await this.$http.post(
              `/restful/v1/dd/check/deleteCheckNum?checkNum=${row.checkNum}`
            );
            if (res.data.code === 1) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.fetch();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    async handleDownload(checkNum) {
      const { data } = await this.$http.get(
        `/restful/v1/dd/check/exportCheckExcel?checkNum=${checkNum}`,
        {
          responseType: "blob"
        }
      );
      try {
        FileSaver.saveAs(
          new Blob([data], { type: "application/octet-stream" }),
          `${checkNum}.xls`
        );
      } catch (error) {
        console.log(111111, error.message);
        this.$message.error("服务器繁忙")
      }
    }
  },
  created() {},
  computed: {
    newlist() {
      return this.newlist1.slice((this.page - 1) * 10, this.page * 10);
    }
  },
  watch: {
    checkFillTime() {
      this.fetch();
    }
  }
};
</script>
